<template>
  <div class="theneCard">
    <div class="theneCard-layout">
      <div
        class="theneCard-layout-header"
        :style="{ background: props.bgColor }"
      ></div>
      <div class="theneCard-layout-content">
        <div class="theneCard-layout-content-left"></div>
        <div class="theneCard-layout-content-rig">
          <div
            class="theneCard-layout-content-rig-btn"
            :style="{ background: props.bgColor }"
          >
            xx
          </div>
        </div>
      </div>
      <div class="theneCard-layout-mask" v-if="props.btn.length > 0">
        <div class="theneCard-layout-mask-item" @click="submit(1)" v-if="props.btn.some(i=> i === '应用')">
          <img src="@/assets/svg/apply.svg" alt="" />
        </div>
        <div class="theneCard-layout-mask-item" @click="del" v-if="props.btn.some(i=> i === '删除') && props.id > 0">
          <img src="@/assets/svg/delete1.svg" alt="" />
        </div>
        <div class="theneCard-layout-mask-item" @click="submit(2)" v-if="props.btn.some(i=> i === '收藏')">
          <img src="@/assets/svg/u3247.svg" alt="" />
        </div>
      </div>
    </div>
    <div class="theneCard-title">{{ props.title }}</div>
  </div>
</template>

<script setup lang="ts">
import { useSub, collectSub, delById } from '@/api/system/globalSettings'
import { ElMessage } from 'element-plus'
import { useAppStore } from '@/store'
import { colorToRgba } from '@/views/system/globalSettings/page/pageThemeColors/pageThemeColors.ts'
const appStore = useAppStore()
const props = defineProps({
  bgColor: {
    type: String,
    default: () => '#6ec8eb'
  },
  title: {
    type: String,
    default: () => ''
  },
  isMask: {
    type: Boolean,
    default: () => true
  },
  data: {
    type: Object,
    default: () => {}
  },
  btn: {
    type: Array,
    default: () => []
  },
  id: {
    type: Number,
    default: () => 0
  }
})
const emits = defineEmits(['reload'])
const submit = (type) => {
  let currentTheme = props.data.sub
  let data = {
    button: props.data.button.map((i) => ({
      configCode: i.configCode,
      configName: i.configName,
      sysSubColorConfigId: i.sysSubColorConfigId
    })),
    sub: {
      configCode: currentTheme.configCode,
      configName: currentTheme.configName,
      sysSubColorConfigId: currentTheme.sysSubColorConfigId
    },
    title: props.data.title
  }
  let http = type === 1 ? useSub : collectSub

  http(data).then(() => {
    ElMessage.success(type === 1 ? '应用成功' : '收藏成功')
    if (type === 1) {
      appStore.getTheme()
      appStore.setAppSetting({
        menu: {
          backgroundColor: currentTheme.configCode,
          textColor: '#FFFFFF',
          hoverBackgroundColor: colorToRgba(currentTheme.configCode, 0.4)
        }
      })
    }
    emits('reload')
  })
}

const del = () => {
  console.log('d', props.id)
  delById(<number>props.id).then(() => {
    ElMessage.success('删除成功')
    emits('reload')
  })
}
</script>

<style scoped lang="scss">
.theneCard {
  width: 236px;
  .theneCard-layout {
    width: 100%;
    border: 1px solid rgba(242, 242, 242, 1);
    border-radius: 4px;
    background: white;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.09);
    cursor: pointer;
    position: relative;
    .theneCard-layout-header {
      width: 100%;
      height: 28px;
    }
    .theneCard-layout-content {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 8px 0;
      .theneCard-layout-content-left {
        width: 54px;
        height: 69px;
        background: #eff0f1;
      }
      .theneCard-layout-content-rig{
        width: 158px;
        height: 69px;
        background: #eff0f1;
        position: relative;
        margin-left: 8px;
        .theneCard-layout-content-rig-btn {
          position: absolute;
          right: 5px;
          top: 5px;
          width: 12px;
          height: 5px;
          font-size: 5px;
          background: #6ec8eb;
          color: #fff;
          display: inline-flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
    .theneCard-layout-mask {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      display: none;
      justify-content: center;
      align-items: center;
      .theneCard-layout-mask-item {
        width: 51px;
        height: 51px;
        border-radius: 50%;
        background: white;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 30px;
          height: 32px;
        }
      }
      .theneCard-layout-mask-item:nth-child(2){
        margin-left: 8px;
        img {
          width: 19px;
          height: 20px;
        }
      }
    }
  }
  .theneCard-title {
    font-size: 14px;
    color: #333;
    margin-top: 10px;
    text-align: center;
  }
  .theneCard-layout:hover .theneCard-layout-mask{
    display: flex;
  }
}
</style>
